<template>
  <div class="page-box h100 display-flex czbj" v-if="jkczxcdf">
    <!-- sonRouter="yybureauFormationBJ" 为跳转新的页面编辑 -->
    <p class="title-label mb10" v-if="!props.xxid">校外-课程管理</p>
    <dxtable
      :dataJson="dataJson"
      :portUrl="portUrl"
      :formJson="formJson"
      :qx="qx"
      :isshowXz="false"
      ref="databale"
      :fixed="true"
      czWidth="250"
      @getlistId="getlistId"
      :czFun="czFun"
      :isshowSc="!props.xxid"
      :hidebj="props.xxid"
    ></dxtable>

    <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>设置报名</div>
      </template>
      <div>
        <n-form ref="formRef">
          <n-grid :cols="24" :x-gap="20">
            <!-- <n-form-item-gi span="12" label="总课时">
              <n-input
                type="text"
                placeholder="总课时"
                v-model:value="formsdr.zks"
              />
            </n-form-item-gi> -->
            <n-form-item-gi span="12" label="报名时间">
              <n-date-picker
                type="datetimerange"
                clearable
                v-model:value="kxczxcet"
              />
            </n-form-item-gi>
          </n-grid>
        </n-form>
        <div class="fz16 z3">设置分班</div>
        <div class="cxvcxvdfgtryy">
          <n-dynamic-input
            v-model:value="customValue"
            :on-create="onCreate"
            show-sort-button
          >
            <template #default="{ value }">
              <div style="width: 600px">
                <n-row gutter="12">
                  <n-col :span="6">
                    <n-input
                      v-model:value="value.fzbh"
                      type="text"
                      placeholder="分组编号"
                    />
                  </n-col>
                  <n-col :span="6">
                    <n-input
                      v-model:value="value.bmrs"
                      type="text"
                      placeholder="报名人数"
                    />
                  </n-col>
                  <n-col :span="6">
                    <n-select v-model:value="value.ls" :options="kcxdsr" />
                  </n-col>
                  <n-col :span="6">
                    <n-input
                      v-model:value="value.js"
                      type="text"
                      placeholder="教室"
                    />
                  </n-col>
                </n-row>
              </div>
            </template>
          </n-dynamic-input>
        </div>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="showModal = false"> 关闭 </n-button>
          <n-button type="primary" class="ml20" @click="baocunsd">
            确定
          </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
<script lang="ts" setup>
import dxtable from "../../../components/util/dxtable.vue";
import sort from "../../../components/util/sort.vue";
import { dxget, dxpost, ninsd, transferHm } from "../../../util/index";
import { NButton, NImage, NTag } from "naive-ui";
import { h, ref, reactive } from "vue";
const kcxdsr = ref([]);
const databale = ref();
const jkczxcdf = ref();
let props = defineProps({
  xxid: "",
});
const initeer = () => {
  databale.value.initDataExpose();
};
const formsdr = ref({
  zks: "",
});
const fdfdsgta = ref([]);
const fdfdsgtb = ref([]);
const fdfdsgtc = ref([]);
const fdfdsgtd = ref([]);
const fdfdsgte = ref([]);
const showModal = ref();
const kcids = ref();
const kcid = ref();
const jigouId = ref();
const kxczxcet = ref(null);
const kcxzcdsf = ref([]);
const customValue = ref([
  {
    fzbh: "",
    bmrs: 60,
    js: "",
  },
]);
const onCreate = () => {
  return {
    fzbh: "",
    bmrs: 60,
    js: "",
  };
};
let dataJson = [
  {
    title: "课程名称",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 24,
    key: "name",
    width: "",
    search: true,
    istable: true,
    required: false,
    width: "160",
  },
  {
    title: "课程类型",
    type: "select",
    options: [],
    key: "type",
    width: "80",
    search: true,
    render(row) {
      try {
        return fdfdsgtb.value.filter((a) => a.value == row.type)[0].label;
      } catch (e) {}
    },
  },
  {
    title: "机构",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "jgmc",
    width: "160",
    search: false,
    istable: true,
    required: true,
  },
  {
    title: "教师",
    key: "jsnames",
    type: "input",
    width: "200",
    render: (row) => {
      let jxcdfed = [];
      let kxcxdf = [];

      if (Array.isArray(row.jsnames)) {
        kxcxdf = row.jsnames;
      } else {
        try {
          kxcxdf = row.jsnames.split(",");
        } catch (e) {
          console.log(e);
        }
      }

      jxcdfed = [];
      kxcxdf.map((a) => {
        jxcdfed.push(h(NTag, { type: "success", class: "fz12 ml5 mr5" }, a));
      });
      return jxcdfed;
    },
  },
  {
    title: "班容量",
    width: 70,
    key: "banlongliang",
    render(row) {
      return row.banlongliang || "0" + "人";
    },
  },
  {
    title: "已报名",
    key: "bmrs",
    width: "80",
    search: false,
    render: (row) => {
      try {
        return kcxzcdsf.value.filter((a) => a.idname == row.id)[0].value;
      } catch (e) {
        return 0;
      }
    },
  },
  {
    title: "年级",
    type: "select",
    options: [],
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "nianjiList",
    width: "250",
    search: true,
    istable: true,
    required: false,
    render: (row) => {
      try {
        return ninsd(fdfdsgtc.value, row.nianjiList);
      } catch (e) {
        return "--";
      }
    },
  },

  {
    title: "课时",
    key: "keshi",
    type: "select",
    search: true,
    width: 160,
    options: [
      {
        label: "全部",
        value: "",
      },
      {
        label: "第三节课",
        value: "第三节课",
      },
      {
        label: "第四节课",
        value: "第四节课",
      },
    ],
    render: (row) => {
      let jxcrr = JSON.parse(JSON.stringify(row.keshi));
      try {
        row.keshi = row.keshi.split(",");
      } catch (e) {}
      return jxcrr;
    },
  },
  {
    title: "收费标准",
    key: "sfbz",
    width: 80,
  },
  {
    title: "上课时间",
    key: "sksj",
    width: "100",
    render: (row) => {
      try {
        row.zouqi = row.zouqi.split(",");
      } catch (e) {}
      try {
        return transferHm(row.sksj) + "~" + transferHm(row.sksjjs);
      } catch (e) {
        return "--";
      }
    },
  },

  {
    title: "添加时间",
    key: "addTime",
    width: 150,
  },
];

const qx = {
  DeletePermissionID: "", //删除
  EditPermissionIdentifier: "", // 编辑
  NewPermissionIdentifier: "ccurriculumxz222", // 新建
  ViewPermissionID: "ccurriculumck", // 查看
};
let xxid = localStorage.xxid;
if (props.xxid) {
  xxid = props.xxid;
}
const portUrl = "courseManagement/curriculum?yxxxid=" + xxid;

let formJson = reactive([
  {
    title: "年级",
    key: "nianjiList",
    type: "checkbox",
    span: 24,
    options: [],
  },
  {
    title: "上课周期",
    key: "zouqi",
    type: "checkbox",
    span: 24,
    options: [
      {
        label: "周一",
        value: "周一",
      },
      {
        label: "周二",
        value: "周二",
      },
      {
        label: "周三",
        value: "周三",
      },
      {
        label: "周四",
        value: "周四",
      },
      {
        label: "周五",
        value: "周五",
      },
    ],
  },
  {
    title: "课时",
    key: "keshi",
    type: "checkbox",
    options: [
      {
        label: "第三节课",
        value: "第三节课",
      },
      {
        label: "第四节课",
        value: "第四节课",
      },
    ],
    val: "第三节课",
  },

  {
    title: "上课开始时间",
    key: "sksj",
    type: "time",
    val: new Date().getTime(),
  },
  {
    title: "上课结束时间",
    key: "sksjjs",
    type: "time",
    val: new Date().getTime() + 1000 * 60 * 60 * 2,
  },

  {
    title: "",
    type: "",
    val: localStorage.xxid,
    span: 24,
    key: "gjxxid",
    istable: true,
    required: true,
  },
]);
const headBtn = [
  {
    name: "生成报名二维码 ",
    async clickFun(row) {
      showModal.value = true;
      const arrList = row.join(",");
      kcids.value = arrList;
    },
  },
];

// 获取字典内容
const xtgxxmfl = async () => {
  const { data }: any = await dxget(
    "dxgjAdmin/getzd/getzdJsList?ids=313,314,316,315,344"
  );
  fdfdsgta.value = data[0];
  fdfdsgtb.value = data[1];
  fdfdsgtc.value = data[2];
  fdfdsgtd.value = data[3];
  fdfdsgte.value = data[4];
  formJson[0].options = data[2];
  dataJson[1].options = [
    {
      label: "全部",
      value: "",
    },
    ...fdfdsgtb.value,
  ];
  dataJson[6].options = [
    {
      label: "全部",
      value: "",
    },
    ...fdfdsgtc.value,
  ];

  jkczxcdf.value = true;
};
xtgxxmfl();

const baocunsd = async () => {
  if (kxczxcet.value) {
    formsdr.value.bmstartTime = kxczxcet.value[0];
    formsdr.value.bmendTime = kxczxcet.value[1];
  }
  formsdr.value.fbjson = JSON.stringify(customValue.value);
  const data = await dxpost(
    "courseManagement/curriculum",
    formsdr.value,
    "put"
  );
  showModal.value = false;
  window.$message.success("操作成功！");
};

const getlistId = async (ids) => {
  const { data }: any = await dxget("courseManagement/erqi/xiaoneikecsdf", {
    xczxda: ids,
  });
  kcxzcdsf.value = data;
  console.log(data);
};

const czFun = {
  fun: (row, loading) => {
    return [
      h(
        NButton,
        {
          type: "info",
          quaternary: true,
          onClick: async (e) => {
            showModal.value = true;
            formsdr.value = row;
            kxczxcet.value = null;
            customValue.value = [
              {
                fzbh: "",
                bmrs: 60,
                ls: "",
                js: "",
              },
            ];

            if (row.bmstartTime) {
              kxczxcet.value = [row.bmstartTime, row.bmendTime];
            }
            let kxcxfda = [];
            let kxcxfdb = [];
            kcxdsr.value = [];
            if (Array.isArray(row.jsnames)) {
              kxcxfda = row.jsids;
              kxcxfdb = row.jsnames;
            } else {
              try {
                kxcxfda = row.jsids.split(",");
                kxcxfdb = row.jsnames.split(",");
              } catch (e) {}
            }

            kxcxfda.map((a, idx) => {
              kcxdsr.value.push({
                value: a,
                label: kxcxfdb[idx],
              });
            });
            if (row.fbjson) {
              try {
                customValue.value = JSON.parse(row.fbjson);
              } catch (e) {}
            }
          },
        },
        "设置报名"
      ),
      // h(
      //   NButton,
      //   {
      //     type: "info",
      //     quaternary: true,
      //     onClick: async (e) => {
      //       if (row.keshi == "第三节课") {
      //         row.keshi = "第四节课";
      //       } else {
      //         row.keshi = "第三节课";
      //       }
      //       await dxpost("courseManagement/curriculum", row);
      //       initeer();
      //     },
      //   },
      //   "添加课时"
      // ),
    ];
  },
};
</script>
<style scoped></style>
